<template>
	<view>
    <view class="bottom-part" v-if="hasResult">
      <image mode="widthFix" class="bottom-img" src="./img/bg.png"></image>
      <image mode="widthFix" class="bottom-avatar" :src="data.imageLinks"></image>
      <view class="bottom-des">
        <view class="name">{{data.remark}}</view>
        <view class="des" >{{name}}，{{data.des}}</view>
      </view>
      <image mode="widthFix" class="bottom-btn" src="./img/btn.png" @click="click"></image>
    </view>
    <teacher-modal ref="tea"></teacher-modal>
	</view>
</template>

<script>
import { appProductId } from "@/http/env.js";
import { getProductConfigApi } from "@/http/api.js";
export default {
  name: 'bottom-banner',
  props: {
    name:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      hasResult: false,
      positionId: 2,
      data: {}
    }
  },
  mounted() {
    // 获取产品线配置
    getProductConfigApi({
      parentId: appProductId,
      positionType: this.positionId
    }).then(res => {
      if (res.code === 200 && res.data.length != 0) {
        this.hasResult = true;
        this.data = res.data[0];
      }else{
        this.hasResult = false;
      }
    })
  },
  methods: {
    click() {
      this.$refs.tea.open()
    }
  }
}
</script>

<style lang="scss">
  .bottom-part {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 750px;
    height: 200rpx;
    bottom: 0;
    position: fixed;
    z-index: 9999;
  }
  .bottom-img {
    width: 100%;
    position: absolute;
    z-index: 998;
  }
  .bottom-avatar {
    width: 144rpx;
    margin: 0 15rpx 0 41rpx;
    z-index: 998;
  }
  .bottom-des {
    flex: 1;
    z-index: 999;
    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #ffffff;
    }
    .des {
      font-size: 22rpx;
      line-height: 33rpx;
      color: #ffffff;
    }
  }
  .bottom-btn {
    width: 138rpx;
    margin: 0 47rpx 0 25rpx;
    z-index: 998;
  }
</style>